<div id="list_switch">
    <form id="filter_switch_form" name="filter_switch_form">
        <h3 style="position:relative;">Products Information
            <div style="top:-10px;position:absolute;right:5px;">
                    <dl class="small">
                      <dt>
                          <label>Search :</label>                                    
                      </dt>
                      <dd>
                          <?=form_input(array('name' => 'keyword',
                                             'id' 	 => 'keyword',
                                             'class' => 'inputtext w160',
                                             'value' => $keyword
                                             ))?>   
                                                       
                         <input id="submit_filter_switch" style="height:27px;" type="submit" class="submit" value="Search" />
                      </dd>
                    </dl>    
                </div>
         </h3>
    <?php
            $select = '';
            $select5 = '';
            $select1 = '';
            $select2 = '';
            if($option == '25'){
                $select = 'selected="selected"';
            }elseif($option == '50'){
                $select5 = 'selected="selected"';
            }elseif($option == '100'){
                $select1 = 'selected="selected"';
            }else{
                $select2 = 'selected="selected"';
            }
    ?>
    <table cellpadding="0" cellspacing="0" border="0" id="listTable"  class="list">
        <thead>
            <tr>
                <th axis="number" width="4%"><strong>ID</strong></th>
                <th axis="string" ><strong>Product</strong></th>
                <th axis="string"><strong>Price</strong></th>
                <th axis="string" width="3%"><strong>Description</strong></th>
                <th axis="string" width="15%"><strong>Image</strong></th>
                <th axis="string" width="15%"><strong>Option</strong></th>
            </tr>
        </thead>
        <tbody>	
           <?php foreach($products as $row):?>
               <tr>
                    <td><?php echo $row['pd_id'];?></td>
                    <td><?php echo $row['pd_name'];?></td>
                    <td><?php echo $row['pd_price'];?></td>
                    <td><?php echo $row['pd_des'];?></td>
                    <td><?php echo $row['pd_image'];?></td>
                    <td>
                        <a class="icon edit center edit_product" rel="<?php echo $row['pd_id'];?>" main="2" style="display:inline-block;" title="Edit"></a>&nbsp;&nbsp;|&nbsp;&nbsp;
                        <a class="icon delete center remove_product" rel="<?php echo $row['pd_id'];?>" id="" style="display:inline-block;" title="Delete"></a>
                    </td>
                </tr>
            <?php endforeach;?>            
        </tbody>
    </table>
    <div style="float:right">
        <span style="float:left;margin:0px 5px 20px 0px;">Number record view : </span>
        <span style="float:left">
            <select name="num" class="view_record" style="width:40px;">
                <option value="25" <?=$select;?>>25</option>
                <option value="50" <?=$select5;?>>50</option>
                <option value="100" <?=$select1;?>>100</option>
                <option value="200" <?=$select2;?>>200</option>
            </select>
        </span>   
    </div>
     <?= $paginations ?>
   </form> 
</div>
<script type="text/javascript">	
	//sort table
	new SortableTable('listTable',{sortOn: 0, sortBy: 'ASC'});	
	// edit location
	$$('.edit_product').each(function(item)
	{
		item.addEvent('click', function(e)
		{
			e.stop();
			var id = item.getProperty('rel');
			//var wid = id;					// Window ID. Ex: wuser120
			ION.formWindow(
				//wid, 						// object ID
				'',
				'newProduct',// Form ID
				'Edit Product', 		// Window title
				'pr_tab_management_cl/page_edit_product/'+id,	// Window content URL
				{width: 350,height: 250}	// Window options
			);
		});
	});
	
	// Apply change bandwidth in / out
	$$('.remove_product').addEvent('click', function(e)
	{
		e.stop();
		var id		= this.getProperty('rel');
		var wid 	= id;			// Window ID. Ex: wuser120
		ION.confirmation(
						wid,
						'pr_tab_management_cl/delete_product/'+id,		
						'Do you want to remove this item ('+id+')?'						
						);
	});
	/**
	 * Pagination element link
	 *
	 */
	$$('#pagination li a').each(function(item, idx)
	{
		item.addEvent('click', function(e)
		{
			e.stop();
			
			new Request.HTML({
				url: admin_url + 'pr_tab_management_cl/get_list_pagination/' + this.getProperty('rel') + '/<?= $nb ?>',
				method: 'post',
				loadMethod: 'xhr',
				data: $('submit_filter_switch'),
				
				//pr_product_list is the id in pr_product view
				update: $('activeList')
			}).send();
		});
	});
	//- Commun
	$('submit_filter_switch').addEvent('click', function(e)
	{	
		e.stop();	
		new Request.HTML({
			url: admin_url + 'pr_tab_management_cl/get_list_pagination/',
			method: 'post',
			loadMethod: 'xhr',
			data: $('filter_switch_form'),//from id
			update: $('activeList'),//div id for show view list
			onRequest: function() { MUI.showSpinner();},
			onFailure: function(xhr) { MUI.hideSpinner();},
			onComplete: function() { MUI.hideSpinner();}
		}).send();				
	});
	/**
	 * view record element link
	 *
	 */
	$$('.view_record').each(function(item)
	{
      item.addEvent('change', function(e)
	  {
		  e.stop();
		  new Request.HTML({
			  url: admin_url + 'pr_tab_management_cl/get_list_pagination/1/'+ item.get('value'),
			  method: 'post',
			  loadMethod: 'xhr',
			  data: $('filter_switch_form'),
			  update: $('activeList')
		  }).send();
	  });
	});
	
</script>
